<template>
    <div>
        <el-card shadow="always" :body-style="{ padding: '20px' }" style="margin: 10px 0;">
            <el-form label-width="80px" :inline="false" size="normal">
                <el-form-item label="SPU名称">
                    123
                </el-form-item>
                <el-form-item label="SKU名称">
                    <el-input v-model="skuParams.skuName" placeholder="请输入SKU名称" size="normal" clearable @change="">
                    </el-input>
                </el-form-item>
                <el-form-item label="价格(元)">
                    <el-input v-model="skuParams.price" placeholder="请输入SKU价格" type="number" size="normal" clearable
                        @change=""></el-input>
                </el-form-item>
                <el-form-item label="重量(千克)">
                    <el-input v-model="skuParams.weight" placeholder="请输入SKU重量" type="number" size="normal" clearable
                        @change=""></el-input>
                </el-form-item>
                <el-form-item label="规格描述">
                    <el-input v-model="skuParams.skuDesc" placeholder="请输入SKU描述" size="normal" type="textarea" clearable
                        @change=""></el-input>
                </el-form-item>
                <el-form-item label="平台属性" size="normal">
                    <el-form inline size="normal">
                        <el-form-item :label="attr.attrName" v-for="(attr,index) in attrArr" :key="attr.id">
                            <el-select v-model="attr.attrIdAndValueId" placeholder="" clearable filterable @change="">
                                <el-option v-for="(attrVal,index) in attr.attrValueList" :key="attrVal.id"
                                    :label="attrVal.valueName" :value="`${attr.id}:${attrVal.id}`"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </el-form-item>

                <el-form-item label="销售属性" size="normal">
                    <el-form inline size="normal">
                        <el-form-item :label="sale.saleAttrName" v-for="(sale,index) in saleAttrArr" :key="sale.id">
                            <el-select v-model="sale.saleAttrIdAndValueId" placeholder="" clearable filterable
                                @change="">
                                <el-option :label="saleVal.saleAttrValueName" :value="`${sale.id}:${saleVal.id}`"
                                    v-for="(saleVal,index) in sale.spuSaleAttrValueList" :key="saleVal.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </el-form-item>

                <el-form-item label="图片列表">
                    <el-table ref="tableRef" border stripe style="margin-bottom:10px;" :data="imgList">
                        <el-table-column type="selection" width="80" align="center"></el-table-column>
                        <el-table-column label="图片">
                            <template #="{row,$index}">
                                <img :src="row.imgUrl" alt="" style="width: 100px;height:60px">
                            </template>
                        </el-table-column>
                        <el-table-column label="名称" prop="imgName"></el-table-column>
                        <el-table-column label="操作">
                            <template #="{row,$index}">
                                <el-button size="small" @click="" v-if="row.isChecked == 1">默认</el-button>
                                <el-button type="primary" size="default" v-else @click="changeChecked(row)">设置为默认
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-button type="primary" size="default" @click="save">保存</el-button>
                    <el-button size="default" @click="cancel">取消</el-button>
                </el-form-item>
            </el-form>

        </el-card>

    </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { reqAttrArr, reqImgList, reqSaleAttrList, reqAddSku, } from '@/api/product/spu/spu'
import { ref } from 'vue'
// 存储照片墙列表
let imgList = ref([])
// 存储全部销售属性
let saleAttrArr = ref([])
// 存储平台属性
let attrArr = ref([])
// 存储table实例
let tableRef = ref()
//收集添加SKU参数
let skuParams = ref({
    //父组件传递过来参数
    category3Id: 0, //三级分类的ID
    spuId: 0, //SPU的ID
    tmId: 0, //spu的品牌的ID

    //v-model收集
    skuName: "", //sku的名字
    price: 0, //sku的价格
    weight: "", //sku的重量
    skuDesc: "", //sku的描述


    skuDefaultImg: "", //默认图片地址
    skuAttrValueList: [
        //平台属性
        // {
        //   attrId: 0, //属性的id
        //   valueId: 0, //属性值的ID
        // },
    ],
    skuSaleAttrValueList: [
        //销售属性
        // {
        //   saleAttrId: 0,
        //   saleAttrValueId: 0,
        // },
    ],
});
// 发请求
const initSku = async (C1Id, C2Id, row) => {
    // 收集三级分类的id|spuId|tmId
    skuParams.value.category3Id = row.category3Id
    skuParams.value.spuId = row.id
    skuParams.value.tmId = row.id
    let result = await reqImgList(row.id)
    let result1 = await reqSaleAttrList(row.id)
    let result2 = await reqAttrArr(C1Id, C2Id, row.category3Id)
    imgList.value = result
    saleAttrArr.value = result1
    attrArr.value = result2
    if(imgList.value.length == 0) return
    // isChecked: 0为默认 ，1为设置默认
    // 设置默认状态
    imgList.value[0].isChecked = 1
    setTimeout(() => {
        // 默认第一张图片勾选
        tableRef.value.toggleRowSelection(imgList.value[0], true)
        // 设置一个默认的图片
        skuParams.value.skuDefaultImg = imgList.value[0].imgUrl
    }, 0);
    // 添加isChecked=0
    for (let i = 0; i < imgList.value.length; i++) {
        if (i > 0) {
            imgList.value[i].isChecked = 0
        }
    }

}

// 点击设置默认按钮
const changeChecked = (row) => {
    imgList.value.forEach((item) => {
        item.isChecked = 0
        //全部table复选框不勾选
        tableRef.value.toggleRowSelection(item, false);
    })
    row.isChecked = 1
    //table复选框设置为默认的勾选
    tableRef.value.toggleRowSelection(row, true);
    //收集服务器需要携带的参数
    skuParams.value.skuDefaultImg = row.imgUrl;
}

// 点击保存按钮
const save = async () => {
    // 整理参数
    // 整理平台属性参数
    skuParams.value.skuAttrValueList = attrArr.value.reduce((prev, next) => {
        if (next.attrIdAndValueId) {
            let [attrId, valueId] = next.attrIdAndValueId.split(':')
            prev.push({ attrId, valueId })
        }
        return prev;
    }, [])

    // 整理全部销售属性
    skuParams.value.skuSaleAttrValueList = saleAttrArr.value.reduce((prev, next) => {
        if (next.saleAttrIdAndValueId) {
            let [saleAttrId, saleAttrValueId] = next.saleAttrIdAndValueId.split(':')
            prev.push({ saleAttrId, saleAttrValueId })
        }
        return prev;
    }, [])
    // 发请求
    try {
        await reqAddSku(skuParams.value)
        ElMessage({
            type: 'success',
            message: '添加成功'
        })
        // 切换场景
        emit('changeShow', { scenes: 0, flag: '' })
        // 清除数据
        resetData()
    } catch (error) {
        ElMessage({
            type: 'error',
            message: '添加失败'
        })
    }

}
//重置数据方法
const resetData = () => {
    attrArr.value = [];
    saleAttrArr.value = [];
    imgList.value = [];
    skuParams.value = {};
}

// 点击取消按钮
const cancel = () => {
    emit('changeShow', { scenes: 0, flag: '' })
    // 清除数据
    resetData()
}
let emit = defineEmits(['changeShow'])
defineExpose({
    initSku
})
</script>

<style scoped>

</style>